<template>
	<view class="container">
		<cu-custom bgColor="bg-blue" isBack="true">
			<block slot="content">维保详情</block>
		</cu-custom>
		<view class="bg-top bg-blue">
			<view class="top-box shadow" style="margin-bottom: 10px;padding-top: 0rpx;">
				<view class="cu-list menu">
					<view class="cu-item" style="padding: 0;min-height:80rpx">
						<view class="content" style="margin-top: 0rpx;">
							<text class="text-black text-bold">最新维保记录:</text>
						</view>
						<view class="action" style="margin-top: 0rpx;">
							
						</view>
					</view>
					<view class="cu-item" style="padding: 0;margin-top: 0rpx;min-height:70rpx;border: none !important;">
						<view class="content margin-top" style="display: flex; justify-content: space-around;margin-top: 0px;">
							<text class="bxImg cuIcon-newshotfill text-gray"></text>
							<text class="text-black"
								style="min-width: 400rpx; max-width: 600rpx; text-align: left;">计划：{{dataDetail.LastQrcodeSummary.JobName}}</text>
							<text class="text-black"
								style="min-width: 290rpx; max-width: 200rpx; text-align: left;"></text>
						</view>
					</view>
					<view class="cu-item" style="padding: 0;margin-top: 0rpx;min-height:70rpx;border: none !important;">
						<view class="content margin-top" style="display: flex; justify-content: space-around;margin-top: 0px;">
							<text class="bxImg cuIcon-friendaddfill text-blue"></text>
							<text class="text-black"
								style="min-width: 400rpx; max-width: 600rpx; text-align: left;">维保员：{{dataDetail.LastQrcodeSummary.RealName}}</text>
							<text class="text-black"
								style="min-width: 290rpx; max-width: 200rpx; text-align: left;"></text>
						</view>
					</view>
					<view class="cu-item" style="padding: 0;min-height:70rpx;border: none !important;">
						<view class="content margin-top" style="display: flex; justify-content: space-around;margin-top: 0px;">
							<text class="cuIcon-timefill text-blue  margin-right-xs"></text>
							<text class="text-black"
								style="min-width: 400rpx; max-width: 600rpx; text-align: left;">时间：{{dataDetail.LastQrcodeSummary.AddTime}}</text>
							<text class="text-black"
									style="min-width: 290rpx; max-width: 200rpx; text-align: left;"></text>
						</view>
					</view>
				</view>
			</view>
			<view class="top-box shadow" v-if="dataDetail.LastQrcodeLogs.length>0">
				<view class="cu-list menu">
					<view class="cu-item" style="padding: 0;" v-for="(res, index) in dataDetail.LastQrcodeLogs" :key="res.id">
						<view class="content" style="display: flex; justify-content: space-around;">
							<text :class="res.ProcessStatus==1?'text-green cuIcon-roundcheckfill':(res.ProcessStatus==2?'text-red cuIcon-roundclosefill':'text-gray cuIcon-infofill')" class="bxImg"></text>
							<!-- <text :class="res.ProcessStatus==1?'text-green cuIcon-roundcheckfill':'text-red cuIcon-roundclosefill'" class="bxImg"></text> -->
							<text class="text-black text-bold"
								style="width:100%; text-align: left;">{{res.label}}</text>
							<text class="text-black"
								style="min-width: 290rpx; max-width: 290rpx; text-align: left;">{{res.value}}</text>
						</view>
					</view>
				</view>
		
			</view>
		
			<!-- 图片信息 -->
			<view class="center-box shadow">
				<view class="cu-list menu">
					<view class="cu-bar bg-white margin-top-xs u-border-bottom">
						<view class="action sub-title">
							<text class="text-xl text-bold text-blue text-shadow">上报图片</text>
							<text class="text-ABC text-blue">Pictures</text>
						</view>
					</view>
					<view v-if="dataDetail.Images.length < 1" class="padding text-grey">暂无数据</view>
					<view v-if="dataDetail.Images.length > 0">
					     <view v-for="(item,index) in dataDetail.Images">
							 <view class="cu-item imagesclass" style="padding: 0;">
							 	<view class="content">
							 		<image @click="goPreviewImage(dataDetail.Images,'')"  :src="dataDetail.Images[index]" class="png cu-avatar round sm imagesclassdetail" mode="aspectFit"></image>
							 	</view>
							 </view>
						 </view>
					</view>
				</view>
			</view>
			<!-- 视频信息 -->
			<view v-if="dataDetail.Video !=''" class="center-box shadow">
				<view class="cu-list menu">
					<view class="cu-bar bg-white margin-top-xs u-border-bottom">
						<view class="action sub-title">
							<text class="text-xl text-bold text-blue text-shadow">上报视频</text>
							<text class="text-ABC text-blue">Video</text>
						</view>
					</view>
					<view  class="cu-item" style="padding: 0;">
						<view class="content">
							<view v-if="dataDetail.Video ==null ||dataDetail.Video ==''" class="padding text-center text-grey">暂无数据</view>
							<video  v-if="dataDetail.Video !=null && dataDetail.Video !=''" :src="dataDetail.baseUrl+dataDetail.Video" style="width: 100%;"  playerid="txv1"></video>
						</view>
					</view>
			
				</view>
			</view>
		
			<!-- 返回按钮 -->
			<view class="padding-lr flex margin-top-sm" style="justify-content: space-between;margin-bottom: 40px;">
				<button @click="goBack()" class="cu-btn bg-blue margin-top-sm lg" style="width: 100%;">返   回</button>
			</view>
		</view>
	</view>
</template>

<script>
import request from '@/common/request.js';
var _this;
export default {
	props: {
	},
	data() {
		return {
			params:{},
			dataDetail:{
				baseUrl:'',
				Video:'',
				Images:[],
				LastQrcodeLogs:[{
					ProcessStatus:1,
					label:'',
					value:''
				}],
				LastQrcodeSummary:{
					JobName:'',
					RealName:'',
					AddTime:'',
				}
			}
		};
	},
	onLoad(option) {
		this.GetQrcodeLastQrcodeLogs(option.qrcodeid)
	},
	mounted() {
	},

	methods: {
		goBack(){
			uni.navigateBack({
				delta:1
			})
		},
		goPreviewImage(url,baseurl){
			let urls=[]
			for(let i=0;i<url.length;i++){
				urls.push(baseurl+url[i])
			}
			uni.previewImage({
				current:0,
				urls:urls
			});
		},
		videoErrorCallback: function(e) {
			uni.showModal({
				content: e.target.errMsg,
				showCancel: false
			})
		},
		GetQrcodeLastQrcodeLogs(qrcode_id) {
			uni.showLoading({
				title: '加载中'
			})
			var that = this;
			let opts = {
				url: 'api/GetQrcodeLastQrcodeLogs',
				method: 'get'
			};
			that.params.qrcode_id=qrcode_id;
			request.httpTokenRequest(opts,that.params).then(res => {
				uni.hideLoading();
				if(res.data.code == 1){
					that.dataDetail=res.data.data;
					that.dataDetail.baseUrl=this.$request22.baseUrl1
					uni.hideLoading();
				}
				else{
					uni.showToast({ title: res.data.msg, icon: 'none' });
				}
			});
		},
	}
};
</script>

<style lang="scss" scoped>
	
	.cu-list.menu-avatar>.cu-item:after, .cu-list.menu>.cu-item:after{
		border:none !important;
	}
	.uni-video{
		width: 100% !important;
	}
	.container {
		width: 750rpx;
		color: #333333;
		.imagesclass{
			width:33%;
			float:left;
			.imagesclassdetail{
				width: 100px !important;
				height: 100px !important;
				margin-right: 20px;
			}
		}
		.bg-top {
			margin-top: -1rpx;
			width: 750rpx;
			height: 220rpx;
			padding-top: 50rpx;
			border-radius: 0 0 20% 20%;

			.top-box {
				width: 700rpx;
				background-color: #FFFFFF;
				margin: 0 auto;
				border-radius: 20rpx;
				padding: 20rpx 30rpx 0rpx;
				position: relative;

				.qh-pic {
					position: absolute;
					right: 64rpx;
					top: -50rpx;
					border-radius: 12rpx;
				}

				.qh-title {
					width: 100%;
					height: 60rpx;
					line-height: 65rpx;
					padding-right: 190rpx;
				}

				.bxBox {
					position: relative;
					display: flex;
					/* padding: 0 30rpx; */
					min-height: 100rpx;
					/* background-color: #ffffff; */
					/* justify-content: space-between; */
					align-items: center;
					font-size: 30rpx;
					line-height: 1.6em;
					flex: 1;

					.bxImg {
						display: inline-block;
						margin-right: 10rpx;
						width: 1.6em;
						text-align: center;
					}
				}

			}
		}

		.center-box {
			color: #333333;
			width: 700rpx;
			background-color: #FFFFFF;
			margin: 0 auto;
			border-radius: 20rpx;
			padding: 0rpx 30rpx 0rpx;
			position: relative;
			margin-top: 20rpx;
		}
	}
</style>
